<template>
	<div id="register1" class="login_bg">
		<common-login :commonData="{$parent:$parent}"></common-login>
		<div class="login_box">
			<ul class="text_center login_box_ul register_box_ul">
				<li>
					<router-link class="login_tab_active" to="/register">个人注册</router-link>
				</li>
				<li>
					<router-link to="/company_register">企业注册</router-link>
				</li>
			</ul>
			<form  ref="form" :model="form" @keyup.enter="toRegister(form)">
            <!-- <form ref="form" :model="form" @keyup.enter="toCompanyRegister(form)"> -->
				<div class="company_register_left">
					<div class="login_input_box">
						<img class="login_icon login_iconUser" src="/static/img/login/login_realName.png">
						<input type="text" v-model.trim="form.realName" placeholder="请输入真实姓名">
					</div>
					<div class="login_input_box">
						<img class="login_icon login_identity" src="/static/img/login/login_identity.png">
						<input type="text" v-model.trim="form.identity" placeholder="请输入身份证号">
					</div>
					<div class="login_input_box">
						<img class="login_icon" src="/static/img/login/login_company.png">
						<input type="text" v-model.trim="form.companyName" placeholder="请输入企业名称(选填)">
					</div>
					<div class="login_input_box">
						<img class="login_icon" src="/static/img/login/login_user.png">
						<input type="text" v-model.trim="form.telephone" placeholder="请输入手机号">
					</div>
					<div class="login_input_box login_input_code">
					    <img class="login_icon" src="/static/img/login/login_code.png">
					    <input style="width: 36%;" type="text" v-model.trim="form.code" placeholder="请输入验证码">
					    <input class="register_getcode" readonly="readonly" :value="verifyCode" :disabled="disabled"
					        @click="getVerifyCode" />
					</div>
					<div class="login_input_box">
						<img class="login_icon" src="/static/img/login/login_pwd.png">
						<input type="password" v-model.trim="form.pwd" placeholder="请输入您的密码">
					</div>
					<div class="login_input_box">
						<img class="login_icon" src="/static/img/login/login_rePwd.png">
						<input type="password" v-model.trim="form.rePwd" placeholder="请再次确认您的密码">
					</div>
				</div>
				<div class="company_register_right text_center">
                    <div class="company_register_right_box userTou relative">
                    	<el-upload drag class="upload-demo" list-type="picture" :headers="headers" :action="uploadUrl()" :before-upload="onBeforeUpload"
                    	 :show-file-list="false" :on-success="faceSuccess">
                    		<img v-if="form.face_base64" :src="'data:image/png;base64,'+form.face_base64" class="avatar touUserImg">
                    		<i v-if="!form.face_base64" class="login_icon_upload el-icon-plus touUserImgjia"></i>
							<img v-if="!form.face_base64" class="login_icon_upload_identity touUserImg" src="/static/img/login/face.png">
                            <p v-if="!form.face_base64" class="absolute userTouText">一寸免冠照</p>
                    	</el-upload>
                    </div>
					<div class="company_register_right_box userIdCard relative">
						<el-upload drag class="upload-demo" list-type="picture" :headers="headers" :action="uploadUrl()" :before-upload="onBeforeUpload"
						 :show-file-list="false" :on-success="identitySuccess">
							<img v-if="form.identity_base64" :src="'data:image/png;base64,'+form.identity_base64" class="avatar idCardImg">
							<img v-if="!form.identity_base64" class="login_icon_upload_identity idCardImg" src="/static/img/login/identity.png">
                    		<i v-if="!form.identity_base64" class="login_icon_upload el-icon-plus touUserImgjia"></i>
                            <p v-if="!form.identity_base64" class="absolute userTouText">上传身份证正面</p>
						</el-upload>
					</div>
				</div>
				<div class="clear"></div>
				<p class="registerAttentionP">注：以上信息用于考试报名，请谨慎填写</p>
				<div class="login_btn_box text_center">
					<a class="login_btn" @click="toRegister(form)">立即注册</a>
					<router-link class="login_a" to="/forget_pwd">忘记密码</router-link><span>|</span>
					<router-link class="login_a" to="/login">点击登录</router-link>
				</div>
			</form>
		</div>
	</div>
</template>

<script>
	import commonLogin from '../components/c_login.vue'
	export default {
		name: 'register',
		data() {
			return {
				verifyCode: "获取短信验证码",
				disabled: false,
				form: {
					telephone: "",
					identity: "",
					companyName: "",
					realName: "",
					pwd: "",
					rePwd: "",
					v_token:"",
					code: "",
                    face_base64:"",
                    identity_base64:""
				}
			}
		},
		created: function() {

		},
        computed:{
            headers(){
                return{
                    version:this.api.version
                }
            }
        },
		mounted: function() {},
		methods: {
			onBeforeUpload: function(file) {
			    var isIMAGE = ((file.type === 'image/jpeg') || (file.type === 'image/png') || (file.type ===
			        'image/bmp') || (file.type ==='image/jpg'));
			    if (!isIMAGE) {
			        this.$message.error('上传文件只能是图片格式（jpeg/png/bmp/jpg）');
			        return false
			    }
			    if (file.size / 1024 > 200) {
			        this.$alert('图片不能大于200kb', '异常提示', {
			            confirmButtonText: '确定',
			            type: 'warning'
			        });
			        return false
			    }
			},
			uploadUrl: function() {
			  return this.api.base64PngUpload;
			},
            faceSuccess(res, file) {
                this.form.face_base64 = res.resultMap;
            },
            identitySuccess(res, file) {
                this.form.identity_base64 = res.resultMap;
            },
			getVerifyCode: function() {
				var that = this;
				if (this.form.telephone == "") {
					this.$message.error('请输入手机号！');
					return;
				}
				this.common.post(this.api.getVerifyCodeRegister, {
					telephone: this.form.telephone
				}, function(data) {
					that.form.v_token=data.resultMap;
					that.setInter();
				}, function(error) {
					that.$message.error(error.resultMsg);
				});

			},
			setInter: function() {
				var that = this;
				var countDown = 60;
				var timer = setInterval(function() {
					countDown--;
					that.verifyCode = "短信已发送（" + countDown + "）";
					that.disabled = true;
					if (countDown < 1) {
						clearInterval(timer);
						that.verifyCode = "获取短信验证码";
						that.disabled = false;
					}
				}, 1000);
			},
			toRegister: function(dataForm) {
				// console.log(JSON.stringify(dataForm));
				var that = this;
				if (dataForm.realName == "") {
					this.$message.error('请输入真实姓名！');
					return;
				}
				if (dataForm.telephone == "") {
					this.$message.error('请输入手机号码！');
					return;
				}
				if (dataForm.identity == "") {
					this.$message.error('请输入身份证号！');
					return;
				}
				if (dataForm.code == "") {
					this.$message.error('请输入验证码！');
					return;
				}
				if (dataForm.pwd == "") {
					this.$message.error('请输入密码！');
					return;
				}
				if (dataForm.rePwd == "") {
					this.$message.error('请再次输入密码！');
					return;
				}
				if (dataForm.pwd != dataForm.rePwd) {
					this.$message.error('两次密码输入不一致！');
					return;
				}
				if (dataForm.face_base64 == "") {
					this.$message.error('请上传个人一寸免冠照！');
					return;
				}
				if (dataForm.identity_base64 == "") {
					this.$message.error('请上传个人身份证正面照！');
					return;
				}
				this.common.post(this.api.register, dataForm, function(data) {
					that.common.toPage("/login");
				}, function(error) {
					that.$message.error(error.resultMsg);
				});
			}
		},
		components: {
			"common-login": commonLogin
		}
	}
</script>
<style>

	#register1 {
		height: auto;
	}
</style>
